<template>
  <h1>组合API-watch函数</h1>
  <h2>{{ number }}</h2>
  <h2>{{ msg }}</h2>
  <button @click="number++">点我加一</button>
  <button @click="msg += '呀'">点我呀一声</button>
</template>

<script>
/* 
  目标：组合API-watch函数
*/
import { ref, watch } from 'vue'
export default {
  name: 'App',
  setup() {
    const number = ref(0)
    const msg = ref('你好')

    // 监听 number 变量，如果有发生变化，自动运行后面的回调函数
    // 监听 [number, msg] 多个响应式数据数据，其中一个数据发生变化，就会触发 watch 回调函数
    watch([number, msg], (newVal, oldVal) => {
      console.log({ newVal, oldVal })
    })

    return { number, msg }
  },
  // Vue2 写法回顾
  // watch: {
  //   number(newVal, oldVal) {
  //     console.log({ newVal, oldVal })
  //   },
  // },
}
</script>